var page;
$(function () {
    page = {
        layer: layui.layer,
        form: layui.form,
        laydate: layui.laydate,
        table: layui.table,
        // echarts
        myChart: echarts.init(document.getElementById('main')),
        tranChart: echarts.init(document.getElementById('trade')),
        sevenChart: echarts.init(document.getElementById('seven')),
        // echarts图形
        graphical: {
            // 环形图
            option: {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}：{d}%"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['青岛', '北京', '上海', '深圳', '广州', '其他']
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            // \n\n可让文字居于牵引线上方
                            formatter: ' {b}：{d}% \n\n',
                            borderWidth: 20,
                            borderRadius: 4,
                            padding: [0, -70],
                            rich: {
                                a: {
                                    color: '#333',
                                    fontSize: 12,
                                    lineHeight: 20
                                },
                                b: {
                                    fontSize: 12,
                                    lineHeight: 20,
                                    color: '#333'
                                }
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 70,
                            lineStyle: {
                                color: '#333'
                            }
                        }

                    },
                    data: [{
                            value: 20,
                            name: '青岛'
                        },
                        {
                            value: 10,
                            name: '北京'
                        },
                        {
                            value: 5,
                            name: '上海'
                        },
                        {
                            value: 15,
                            name: '深圳'
                        },
                        {
                            value: 30,
                            name: '广州'
                        },
                        {
                            value: 20,
                            name: '其他'
                        }
                    ]
                }]
            },
            // 曲线图
            transaction: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['DAU(日活量)', 'WAU(周活量)']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['2018\n11-02', '2018\n11-03', '2018\n11-04', '2018\n11-05',
                        '2018\n11-06'
                    ]
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                        name: 'DAU(日活量)',
                        type: 'line',
                        smooth: true,
                        // stack: '总量',
                        areaStyle: {},
                        data: [43, 345, 7, 64, 6, 66, 10]
                    },
                    {
                        name: 'WAU(周活量)',
                        type: 'line',
                        smooth: true,
                        // stack: '总量',
                        areaStyle: {
                            normal: {}
                        },
                        data: [56, 32, 12, 34, 90, 33, 20]
                    }
                ]


            },
            // 折线图
            fracture: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['DAU(日活量)', 'WAU(周活量)', 'MAU(月活量)']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                        name: 'DAU(日活量)',
                        type: 'line',
                        // stack: '总量',
                        areaStyle: {},
                        data: [150, 23, 201, 154, 90, 33, 10]
                    },
                    {
                        name: 'WAU(周活量)',
                        type: 'line',
                        // stack: '总量',
                        areaStyle: {
                            normal: {}
                        },
                        data: [32, 12, 30, 34, 90, 33, 20]
                    },
                    {
                        name: 'MAU(月活量)',
                        type: 'line',
                        // stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        areaStyle: {
                            normal: {}
                        },
                        data: [20, 62, 90, 93, 129, 133, 120]
                    }
                ]


            },
        },
        init: function () {
            page.initialization()
            var option = page.graphical.option,
                sevenOption = page.graphical.fracture,
                transaction = page.graphical.transaction
            page.myChart.setOption(option);
            page.sevenChart.setOption(sevenOption);
            page.tranChart.setOption(transaction);
            // ajax
            page.ajax.getNewUserFrom()
        },
        // layui初始化
        initialization: function () {
            // 新用户来源起始时间初始化
            page.laydate.render({
                elem: '#laydate-start',
                isInitValue: false,
                trigger: 'click'
            });
            // 新用户来源截止时间初始化
            page.laydate.render({
                elem: '#laydate-end',
                isInitValue: false,
                trigger: 'click'
            });
            // 活跃时间初始化
            page.laydate.render({
                elem: '#laydate-active',
                isInitValue: false,
                trigger: 'click'
            });
            // 转发量统计时间初始化
            page.laydate.render({
                elem: '#laydate-forward-start',
                isInitValue: false,
                trigger: 'click'
            });
            page.laydate.render({
                elem: '#laydate-forward-end',
                isInitValue: false,
                trigger: 'click'
            })
            // 活跃用户时间初始化
            page.laydate.render({
                elem: '#laydate-lively-start',
                isInitValue: false,
                trigger: 'click'
            });
            page.laydate.render({
                elem: '#laydate-lively-end',
                isInitValue: false,
                trigger: 'click'
            });
            // 交易统计时间初始化
            page.laydate.render({
                elem: '#laydate-transaction-start',
                isInitValue: false,
                trigger: 'click'
            });
            page.laydate.render({
                elem: '#laydate-transaction-end',
                isInitValue: false,
                trigger: 'click'
            });
            // 表格初始化
            let setting = baseTableOptions;
            setting.elem = '#usertab'
            setting.skin = 'line,row',
                setting.height = 238,
                setting.url = '/html/activeUser.json'
            setting.limit = 4
            setting.cols = [
                [ //表头
                    {
                        field: 'loginOutTimeStr',
                        title: '日期',
                        sort: true,
                        align: 'center',
                        templet: "<div>{{layui.util.toDateString(d.loginOutTimeStr, 'yyyy-MM-dd')}}</div>"
                    }, {
                        field: 'nickname',
                        title: '用户名',
                        sort: true,
                        align: 'center'
                    }, {
                        field: 'sumTime',
                        title: '使用频率(次)',
                        sort: true,
                        align: 'center'
                    }, {
                        field: 'userCount',
                        title: '使用时长',
                        sort: true,
                        align: 'center'
                    }
                ]
            ]
            page.table.render(setting);
        },
        ajax: {
            getNewUserFrom: function () {
                $.ajax({
                    url: './newUserFrom.json',
                    data: {},
                    type: 'GET',
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res)
                    }
                })
            }
        }
    }
    page.init()
})